<template>
  <div class="account-info">
    <go-back class="back"></go-back>
    <div class="main-info">
      <div class="left">
        <van-image round width="20vw" height="20vw" :src="accountInfo.avatar" />
      </div>
      <div class="right">
        <div class="over">
          <div>
            <van-icon name="points" />
            <span>余额:</span>
          </div>
          <div>￥{{ accountInfo.over.toFixed(2) }}</div>
        </div>
        <div class="status">
          <div>
            <van-icon name="certificate" />
            <span>状态:</span>
          </div>
          <div>{{ accountInfo.status == 1 ? '正常' : '异常' }}</div>
        </div>
      </div>
    </div>
    <div class="account">
      <div>
        <van-icon name="debit-pay" />
        <span>一卡通账号:</span>
      </div>
      <div>{{ accountInfo.account }}</div>
    </div>
  </div>
</template>

<script lang="js">
import {defineComponent,  reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import GoBack from '@/components/go-back/go-back.vue'
export default defineComponent({
  props: {
    accountInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  components: {
    GoBack
  },
  setup() {
     const router = useRouter();

    return {

    }

  }
})
</script>

<style scoped lang="less">
.account-info {
  min-height: 20vh;
  background-color: rgb(116, 192, 251);
  padding: 6vw;
  color: #f0f0f0;
  &:deep(.back) {
    i {
      color: white;
    }
  }
  i {
    color: white;
  }

  .main-info {
    display: flex;
    align-items: center;
    .left {
      margin-right: 6vw;
      width: 20vw;
    }
    .right {
      flex: 1;
      .over,
      .status {
        width: 100%;
        margin: 3.6vh 0;
        font-weight: 550;
        font-size: 4.4vw;
        display: flex;
        justify-content: space-between;
        span {
          margin-left: 2vw;
        }
      }
    }
  }

  .account {
    display: flex;
    justify-content: space-between;
    padding-left: 15vw;
    font-weight: 550;
    font-size: 4.4vw;
    span {
    }
  }
}
</style>
